<!--
 * @Description: 缺陷基本信息下钻
 * @Author: zhangweili
 * @Date: 2021-04-13 16:00:44
 * @LastEditTime: 2023-05-16 18:02:29
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="app-container v-flex JCWWTKInformation">
    <!-- 顶部操作栏 -->
    <filter-form
      :form="listQuery"
      :data="filterData"
      :has-default-operation="false"
      @search="search">
      <el-button
        style="width: 99px;"
        class="search-btn"
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="search">查询</el-button>
      <el-button
        style="width: 99px;"
        class="refresh-btn"
        size="mini"
        type="primary"
        icon="el-icon-refresh"
        @click="resetSearch">重置</el-button>
    </filter-form>

    <!-- 顶部操作栏 -->


    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic defect-information">
      <div class="dialogmodel1">
        <div class="row1">
          <div class="column">
            <Model1 ref="Model1" :type-status="typed" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
          </div>
          <div class="column">
            <Model2 ref="Model2 " :type-status="typed" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
          </div>
          <div class="column">
            <Model3 ref="Model3 " :type-status="typed" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
          </div>
        </div>
        <div class="row2">
          <Model4 ref="Model4" :type-status="typed" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
        </div>
      </div>
    </div>
    <!-- 表格 -->


  </div>
</template>

<script>
  import Model1 from './components/mode1.vue'
  import Model2 from './components/model2.vue'
  import Model3 from './components/model3.vue'
  import Model4 from './components/model4.vue'
  import { mapGetters } from 'vuex'
  export default {
    name: 'JCWWTKInformation',
    components: {
      Model1,
      Model2,
      Model3,
      Model4
    },
    data() {
      return {
        typed:1,
        // 顶部操作栏配置
        filterData: {
          typeds: {
            width: '160px',
            key: 'typeds',
            type: 'select',
            title: '缺陷信息',
            placeholder: '缺陷信息详情',
            options: [
              { name: '缺陷总数', value: 1 },
              { name: '已销号', value: 2 },
              { name: '未销号', value: 3 },
              { name: '一级缺陷总数', value: 4 },
              { name: '二级A类缺陷总数', value: 5 },
              { name: '二级B类缺陷总数', value: 6 }
            ],
            props: { label: 'name', value: 'value' },
            changeFn: (vm) => {
              if (vm) {
                this.typed = vm
                this.listQuery = {
                  typeds: vm,
                }
                this.search() // 加载下拉信息列表
              }
            }
          },
        },
        railTypes: 'GT,PT',
        // 查询列表请求参数
        listQuery: {
          typeds:  1
        }
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    activated() {
      // 获取当前登入人可以管理的部门所属单位列表
    },
    mounted() {
      this.init()
    },
    methods: {
      init(){
        this.typed = 1
          this.listQuery.typeds =  1
      },

      // 搜索
      search() {
        debugger
        this.listQuery.typeds=this.typed
      },
      resetSearch() { // 重置
        this.listQuery = {
          typeds: 1
        }
        this.init() // 获取当前登入人可以管理的部门所属单位列表
      }
    }
  }
</script>

<style lang="scss" scope>
  .JCWWTKInformation {
    .refresh-btn {
      background-color: #3dbed5;
      border: none;
    }
    .refresh-btn:hover {
      background-color: #73cddd;
      border: none;
    }
    .content {
      position: relative;
      background-color: #ffffff;
      padding: 20px 30px;

    }
  }
    .dialogmodel1 {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
    .row1 {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: space-between;
    }
    .row2 {
      width: 100%;
      background: #0f1f56;
      height: 38%;
    }
    .column {
      width: 32.5%;
      height: 100%;
      background: #0f1f56;
    }
</style>
